<template>
  <div class="index">
    <div class="home rflex">
      <div class="menu_left">
        <left-menu></left-menu>
      </div>
      <div class="menu_right wflex el-scrollbar" ref="menu_right">
        <head-nav></head-nav>
        <div class="menu_content" ref="menu_content">
          <router-view></router-view><!--页面渲染入口-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import LeftMenu from '../layout/leftMenu.vue';
import HeadNav from '../layout/headNav.vue';

export default {
  name: 'Index',
  components:{
    LeftMenu,HeadNav
  },
  data(){
    return{

    }
  },
  created() {

  }
}

</script>

<style lang="less">
.index{
  .menu_left{
    width: 250px;
  }
  .menu_right{
    overflow: auto;
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    background:#282a36;
    width: calc(100% - 250px);
    /deep/ .el-menu {
      background: #282a36 !important;
    }
    .menu_content{
      position: relative;
      margin:50px auto 0;
      width:98%;
      //margin-right: 30px;
      //padding-left: 30px;
      //padding-right: 30px;
      padding-top: 30px;
      background:#282a36;
      color: #ffffff;
    }

  }
}
</style>
